import './new.scss'
// import styles from "./new.module.scss"
import { NavLink } from 'react-router-dom'
import React from 'react'

export default class News extends React.Component {
    state = {
        shopList: [],
        tabIndex:-1
    }
    componentDidMount() {
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/new').then((res) => {
            if (res.data.msg == '操作成功') {
                this.setState({
                    shopList: res.data.result
                })

            }
        })
    }
    render() {
        return (
            <div id="new">
                <div className="news">
                    <div className="container">
                        <div className="head">
                            <h3>新鲜好物 <span>新鲜出炉 品质靠谱</span></h3>
                            <a href="">查看全部&gt;</a>
                        </div>
                        <div className="content">
                            <ul>
                                {this.state.shopList.map((item, index) => {
                                    return (
                                        <li key={index} className={this.state.tabIndex==index ? 'hover' :''} onMouseOver={()=>{this.setState({tabIndex:index})}} onMouseOut={()=>{this.setState({tabIndex:-1})}}>
                                            <NavLink>
                                                <img src={item.picture} alt="" />
                                                <p>{item.name}</p>
                                                <p>￥{item.price}</p>
                                            </NavLink>
                                        </li>
                                    )
                                })}


                            </ul>
                        </div>
                    </div>
                </div>
            </div >
        )
    }
}